<template>
    <div>
        <a-modal v-model:visible="visible" title="添加" @ok="handleOk" :footer="null">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">

                <a-form-item label="姓名" v-bind="validateInfos.name">
                    <a-input v-model:value="modelRef.name" placeholder="请输入姓名" />
                </a-form-item>

                <a-form-item label="密码" v-bind="validateInfos.password">
                    <a-input type="password" v-model:value="modelRef.password" placeholder="请输入密码" />
                </a-form-item>

                <a-form-item label="性别">
                    <a-radio-group v-model:value="modelRef.sex">
                        <a-radio :value="0">男</a-radio>
                        <a-radio :value="1">女</a-radio>
                        <a-radio :value="2">保密</a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item label="邮箱" v-bind="validateInfos.email">
                    <a-input v-model:value="modelRef.email" placeholder="请输入邮箱" />
                </a-form-item>

                <a-form-item label="手机号" v-bind="validateInfos.tel">
                    <div style="display: flex;;">
                        <select style="color:#1890ff;height:31px;width:80px;border: 1px solid #d9d9d9;border-right: none;">
                            <option>+86</option>
                            <option>+88</option>
                        </select>
                        <a-input v-model:value="modelRef.tel" placeholder="请输入手机号" />
                    </div>

                </a-form-item>


                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click.prevent="onSubmit">注册</a-button>
                    <a-button type="primary" style="margin-left: 10px" @click="reset">重置</a-button>
                    <a-button type="primary" style="margin-left: 10px" @click="handleOk">退出</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRaw } from 'vue';
import Bus from "@/utils/Bus"
import { Form } from 'ant-design-vue';

const useForm = Form.useForm;
export default defineComponent({
    setup() {
        const visible = ref<boolean>(false);

        const showModal = () => {
            visible.value = true;
        };

        const handleOk = (e: MouseEvent) => {
            console.log(e);
            visible.value = false;
        };

        onMounted(() => {
            Bus.on("startDG", () => {
                resetFields()
                visible.value = true;
            })

            Bus.on("edit", (item:any) => {
                console.log(item);
                visible.value = true;
                modelRef.name = item.username
                modelRef.password = item.mobile
                modelRef.email = item.email
                modelRef.tel = item.mobile
                modelRef.sex = +item.gender - 1
                

            })
        })

        // form表单
        const modelRef = reactive({
            name: '',
            sub: {
                name: '',
            },
            password: "",
            sex: 2,
            email: "",
            tel: "",
            price: 86
        });
        const { resetFields, validate, validateInfos } = useForm(
            modelRef,
            reactive({
                name: [
                    {
                        required: true,
                        message: 'Please input name',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: 'Please input password',
                    },
                ],
                sex: [
                    {
                        required: true,
                        message: 'Please input sub name',
                    },
                ],
                email: [
                    {
                        required: true,
                        message: 'Please input email',
                    },
                ],
                tel: [
                    {
                        required: true,
                        message: 'Please input tel',
                    },
                ],
            }),
        );
        const onSubmit = () => {
            validate()
                .then((res: any) => {
                    console.log(res, toRaw(modelRef));
                })
                .catch((err: any) => {
                    console.log('error', err);
                });
        };
        const reset = () => {
            resetFields();
        };
        return {
            labelCol: { span: 7 },
            wrapperCol: { span: 14 },
            validateInfos,
            reset,
            modelRef,
            onSubmit,
            visible,
            showModal,
            handleOk,
        };
    },
});
</script>